<template>
  <div id="business">
    <!-- 顶部下拉菜单 -->
    <van-search
      v-model="orderNo"
      placeholder="输入订单号"
      shape="round"
      @input="onSearch"
    >
    </van-search>

    <van-pull-refresh
      v-model="refreshing"
      @refresh="onRefresh"
      class="refresh"
      success-text="刷新成功"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        class="orders"
      >
        <van-cell
          v-for="item in orders"
          :key="item.id"
          class="item"
          @click="onClick(item)"
          clickable
          center
        >
          <template #icon>
            <van-image
              class="avatar"
              width="48"
              height="48"
              :src="require('../assets/bx.jpg')"
              lazy-load
              round
            />
          </template>
          <template #title>
            <span class="title">{{item.id}}</span>
          </template>
          <template #label>
            求购单
          </template>
          <template #default>
            <span class="success">{{item.num}} 数量</span>
            <div class="total">￥{{item.count}} 金额</div>
          </template>
        </van-cell>

        <template #finished>
          <van-empty v-if="orders.length == 0" description="这里什么也没有" />
          <div v-else>没有更多了</div>
        </template>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
  import store from '@/store';
  import axios from 'axios';
  import Vue from 'vue';
  import { Toast, Dialog } from 'vant';

  Vue.use(Toast);
  Vue.use(Dialog);
  var self;

  export default {
    name: "Business",
    data() {
      return {
        orderNo: '',
        active: 0,
        orders: [],
        loading: false,
        finished: false,
        value1: 0,
        value2: 'a',
        option1: [
          { text: '全部', value: 0 },
          { text: '出售单', value: 1 },
          { text: '求购单', value: 2 },
        ],
        option2: [
          { text: '正序', value: 'a' },
          { text: '倒序', value: 'b' }
        ],
        option3: [
          { text: this.orderNo, value: this.orderNo },
        ],
        index: 0,
        pageNo: 1, // 第几页
        pageSize: 10, // 每页数据条数
        user: JSON.parse(sessionStorage.getItem('user')),
        refreshing: false,
      };
    },
    methods: {
      // 加载订单
      onLoad() {
        axios.get(store.state.api + '/market/getOrderList', {
          params: {
            page: this.pageNo,
            limit: this.pageSize,
          }
        }).then(res => {
          if (!res.data.data || res.data.data.length == 0) {
            this.finished = true;
            return;
          }

          if (res.data.code == '200') {
            res.data.data.forEach(item => this.orders.push(item));
            self.pageNo = self.pageNo + 1;
          }

          this.loading = false;
        }).catch(error => {
          this.refreshing = false;
        });
      },

      // 搜索
      onSearch() {
        this.orders = [];

        if (this.orderNo == '') {
          this.onLoad();
          return;
        }
        if (this.orderNo.length < 7) {
          return;
        }

        axios.get(store.state.api + '/market/getOrderById', {
          params: {
            id: this.orderNo
          }
        }).then(res => {
          if (res.data.code == '200') {
            res.data.data.forEach(item => this.orders.push(item));
          }
        }).catch(error => {

        });
      },

      // 订单点击事件
      onClick(order) {
        // 判断订单是否可以交易
        axios.get(store.state.api + '/market/toSale', {
          params: {
            uid: this.user.uid,
            orderId: order.id,
          }
        }).then(res => {
          if (res.data.code == '200') {
            Dialog({
              message: '是否出售',
              showCancelButton: true,
              closeOnClickOverlay: true
            }).then(() => {
              // 跳转到详情页
              this.$router.push({name: 'BusinessDetail', params: order});
            }).catch(() => {

            });
          } else {
            Toast({
              message: res.data.msg,
              position: 'bottom',
            });
          }
        }).catch(error => {

        });
      },
      // 下拉刷新
      onRefresh() {
        this.orders = [];
        self.pageNo = 1;
        this.onLoad();
        this.refreshing = false;
      }
    },
    mounted() {
      self = this;
    }
  }
</script>

<style scoped>
  .refresh {
    position: fixed;
    width: 100%;
    top: 48px;
    bottom: 50px;
    overflow: auto;
  }

  .avatar {
    margin-right: 10px;
  }

  /* 订单样式 */
  .item {
    margin-top: 15px;
    margin-left: 15px;
    margin-right: 15px;
    width: unset;
    border-radius: 10px;
  }
  .title {
    font-size: 16px;
  }
  .total {
    color: #969799;
    font-size: 14px;
  }
  .success {
    color: #07c160;
  }
  .danger {
    color: #ee0a24;
  }
  .van-cell__label {
    font-size: 14px;
  }

  /* 发布订单 */
  .overlay {
    z-index: 2;
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  .publish-icon {
    font-size: 80px;
    color: #1989fa;
  }
  .publish-text {
    color: #1989fa;
    font-weight: 600;
  }
</style>
